<script setup lang="ts">
import  patientList  from "@/mock/patientData";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 40, // 调整行高
    limitScrollNum: 10, // 增加显示行数
  },
  scroll: true,
});

// 获取病人数据
const getData = () => {
  try {
    console.log("左下--病人信息", patientList);
    state.list = patientList;
  } catch (err) {
    console.error("加载病人数据失败:", err);
    ElMessage.error("加载病人数据失败");
  }
};

// 危险分层颜色
const riskLevelColor = (level: string) => {
  switch (level) {
    case "低危":
      return "typeGreen";
    case "中危":
      return "typeYellow";
    case "高危":
      return "typeOrange";
    case "极高危":
      return "typeRed";
    default:
      return "typeGray";
  }
};

// 日期格式化
const formatDate = (dateString: string) => {
  if (!dateString) return "-";
  try {
    return dateString.split(' ')[0];
  } catch {
    return dateString;
  }
};

const comName = computed(() => {
  if (indexConfig.value.leftBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="left_boottom_wrap beautify-scroll-def">
    <!-- 固定表头 -->
    <div class="table-header">
      <div class="table-row header-row">
        <div class="table-cell">序号</div>
        <div class="table-cell">姓名</div>
        <div class="table-cell">性别</div>
        <div class="table-cell">年龄</div>
        <div class="table-cell">危险分层</div>
        <div class="table-cell">入组单位</div>
        <div class="table-cell">入组时间</div>
      </div>
    </div>

    <!-- 滚动内容区域 -->
    <div class="table-container" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
      <component
        :is="comName"
        :list="state.list"
        v-model="state.scroll"
        :singleHeight="state.defaultOption.singleHeight"
        :step="state.defaultOption.step"
        :limitScrollNum="state.defaultOption.limitScrollNum"
        :hover="state.defaultOption.hover"
        :singleWaitTime="state.defaultOption.singleWaitTime"
        :wheel="state.defaultOption.wheel"
      >
        <div class="table-body">
          <div 
            class="table-row data-row" 
            v-for="(item, i) in state.list" 
            :key="item.id || i"
          >
            <div class="table-cell">{{ i + 1 }}</div>
            <div class="table-cell name-cell">{{ item.name }}</div>
            <div class="table-cell">{{ item.gender }}</div>
            <div class="table-cell">{{ item.age }}岁</div>
            <div class="table-cell">
              <span class="risk-level" :class="riskLevelColor(item.riskLevel)">
                {{ item.riskLevel }}
              </span>
            </div>
            <div class="table-cell hospital-cell">{{ item.hospital }}</div>
            <div class="table-cell">{{ formatDate(item.joinTime) }}</div>
          </div>
        </div>
      </component>
    </div>
  </div>
</template>

<style scoped lang="scss">
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 表头固定区域
.table-header {
  flex-shrink: 0;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

// 表格内容滚动区域
.table-container {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 40px); // 减去表头高度
  
  &.overflow-y-auto {
    overflow-y: auto;
  }
}

.table-body {
  width: 100%;
}

.table-row {
  display: flex;
  align-items: center;
  width: 100%;
  
  &.header-row {
    height: 40px;
    font-weight: bold;
    color: $primary-color;
    background: rgba(0, 0, 0, 0.5);
  }
  
  &.data-row {
    height: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s;
    
    &:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    
    &:nth-child(even) {
      background: rgba(255, 255, 255, 0.02);
    }
  }
}

.table-cell {
  flex: 1;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  // 序号列
  &:first-child {
    flex: 0.1;
    color: $primary-color;
    font-weight: bold;
    width: 80px;
  }
  
  // 姓名列
  &:nth-child(2) {
    flex: 0.3;
    justify-content: center;

    
  }
  
  // 性别列
  &:nth-child(3) {
    flex: 0.2;
    width: 10px;
  }
  
  // 年龄列
  &:nth-child(4) {
    flex: 0.2;
  }
  
  // 危险分层列
  &:nth-child(5) {
    flex: 0.3;
  }
  
  // 入组单位列
  &:nth-child(6) {
    flex: 1.5;
    justify-content: flex-start;
  }
  
  // 入组时间列
  &:nth-child(7) {
    flex: 0.8;
  }
}

// 危险分层样式
.risk-level {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
}

.typeGreen {
  color: #29fc29; // 绿色-低危
}

.typeYellow {
  color: #e6a23c; // 黄色-中危
}

.typeOrange {
  color: #f56c1d; // 橙色-高危
}

.typeRed {
  color: #fc1a1a; // 红色-极高危
}

.typeGray {
  color: rgba(255, 255, 255, 0.6); // 灰色-未评估
}

// 姓名和医院名称样式
.name-cell {
  color: #1890ff;
  font-weight: bold;
}

.hospital-cell {
  color: rgba(255, 255, 255, 0.9);
}

// 响应式调整
@media (max-width: 1400px) {
  .table-cell {
    font-size: 11px;
    padding: 0 4px;
    
    &:nth-child(6) {
      flex: 1.5;
    }
  }
  
  .risk-level {
    padding: 1px 6px;
    font-size: 10px;
  }
}

// 美化滚动条
.beautify-scroll-def {
  .table-container {
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $primary-color;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: lighten($primary-color, 10%);
    }
  }
}
</style>